<template>
  <div class="box">
    <a-card>
      <a-form-model
        ref="ruleForm"
        :model="outletForm"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 12 }"
        :rules="rules"
      >
        <div class="title">门店基础设置</div>
        <a-form-model-item label="门店名称" ref="name" prop="name">
          <a-input v-model="outletForm.name" placeholder="给门店起个名字" />
        </a-form-model-item>
        <a-form-model-item label="门店logo" prop="cover_url">
          <div class="loadImg" v-if="outletForm.cover_url == ''" @click="showLoadImg">
            <a-icon type="plus" />
            <span>上传照片</span>
          </div>
          <div class="loadImg" @click="showLoadImg" v-else>
            <img :src="outletForm.cover_url" alt="" />
          </div>
          <span style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">建议尺寸：400*400</span>
        </a-form-model-item>

        <a-form-model-item label="联系人" prop="contact">
          <a-input v-model="outletForm.contact" placeholder="输入联系人名称" />
        </a-form-model-item>
        <a-form-model-item label="联系电话" prop="mobile">
          <a-input v-model="outletForm.mobile" placeholder="输入联系人电话" />
        </a-form-model-item>
        <a-form-model-item label="地区" prop="area">
          <Address v-model="addressInfo"></Address>
        </a-form-model-item>
        <a-form-model-item label="详细地址" prop="address">
          <a-input v-model="outletForm.address" placeholder="输入详细地址" />
        </a-form-model-item>
        <a-form-model-item label="坐标" prop="location">
          <a-input-search
            @search="select_map_visiable = !select_map_visiable"
            placeholder="选择坐标"
            v-model="location"
            :readOnly="true"
          >
            <a-button slot="enterButton">搜索地图</a-button>
          </a-input-search>
        </a-form-model-item>

        <div class="title">运营设置</div>
        <a-form-model-item label="营业状态" prop="open_status">
          <a-radio-group v-model="outletForm.open_status">
            <a-radio :value="1">营业</a-radio>
            <a-radio :value="0">打烊</a-radio>
          </a-radio-group>
          <p style="color: rgba(0, 0, 0, 0.45); margin-bottom: 5px; font-size: 14px">打烊的门店用户无法下单</p>
        </a-form-model-item>
        <a-form-model-item label="营业时间">
          <a-radio-group v-model="outletForm.shop_time_type">
            <a-radio :value="0">全天</a-radio>
            <a-radio :value="1">自定义</a-radio>
          </a-radio-group>
          <div class="time_arr" v-if="outletForm.shop_time_type == 1">
            <a-time-picker v-model="outletForm.start_time" format="HH:mm" valueFormat="HH:mm" />
            <span> 至 {{ time }} </span>
            <a-time-picker v-model="outletForm.end_time" format="HH:mm" valueFormat="HH:mm" />
          </div>
        </a-form-model-item>
        <a-form-model-item label="是否可下单">
          <a-radio-group v-model="outletForm.is_time_forbid">
            <a-radio :value="0">非营业时间禁止下单</a-radio>
            <a-radio :value="1">非营业时间可以下单</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item label="配送范围" v-if="outletForm.delivery_type.indexOf('delivery') !== -1">
          <a-radio
            :checked="outletForm.is_set_distance == 0 ? false : true"
            @click="outletForm.is_set_distance = outletForm.is_set_distance == 0 ? 1 : 0"
            >配送范围</a-radio
          >
          <a-input
            addon-after="km"
            v-model="outletForm.distance"
            style="width:200px;display:block;"
            v-if="outletForm.is_set_distance == 1"
          />
          <p style="color: rgba(0, 0, 0, 0.45); margin-bottom: 5px; font-size: 14px">
            同城配送订单，超过配送范围不能选择同城配送
          </p>
        </a-form-model-item>

        <div class="title">配送设置</div>
        <a-form-model-item label="配送方式" prop="delivery_type">
          <a-checkbox-group v-model="outletForm.delivery_type">
            <div class="delivery">
              <a-checkbox value="shop" name="type"> 到店自提 </a-checkbox>
              <p>支持买家网上下单后自行到门店提取的服务</p>
            </div>
            <div class="delivery">
              <a-checkbox value="delivery" name="type"> 同城配送 </a-checkbox>
              <p>该门店支持同城配送服务</p>
            </div>
            <div class="delivery">
              <a-checkbox value="express" name="type"> 快递配送 </a-checkbox>
              <p>该门店支持快递配送服务</p>
            </div>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 10, offset: 8 }">
          <a-button type="primary" @click="onSubmit"> 保存 </a-button>
          <a-button style="margin-left: 10px" @click="$router.push('/outletManage/list')"> 取消 </a-button>
        </a-form-model-item>
      </a-form-model>
      <SelectMap
        v-if="select_map_visiable"
        :value.sync="select_map_visiable"
        @onOk="
          e => {
            location = e
          }
        "
      ></SelectMap>
      <storage-select selectNum="1" type="image" ref="img" @onOk="okPic" :hiddenInput="true"> </storage-select>
    </a-card>
  </div>
</template>

<script>
import { Address } from '@/components'
import SelectMap from '@/components/SelectMap/SelectMap'
import { shopEdit, shopDetail } from '@/api/outlet'
export default {
  data() {
    let validatePic = (rule, value, callback) => {
      if (this.outletForm.cover_url == '') {
        callback(new Error('请上传logo图片'))
      } else {
        callback()
      }
    }
    let validateDelivery = (rule, value, callback) => {
      if (!this.outletForm.self_delivery_type.length) {
        callback(new Error('请选择至少一种配送方式'))
      } else {
        callback()
      }
    }
    let validateArea = (rule, value, callback) => {
      if (!this.addressInfo.province_id) {
        callback(new Error('请选择地区'))
      } else {
        callback()
      }
    }
    let validateLocation = (rule, value, callback) => {
      if (this.location == '') {
        callback(new Error('请选择坐标'))
      } else {
        callback()
      }
    }
    let rateCheck = (rule, value, callback) => {
      if (this.rate == '' || this.clerk_rate == '') {
        callback(new Error('请填写佣金'))
      } else {
        callback()
      }
    }
    return {
      outletForm: {
        // 门店名称
        name: '',
        // 门店logo
        cover_url: '',
        // 营业状态
        open_status: 1,
        // 营业状态类型 0 全天  1时间段
        shop_time_type: 0,
        // 营业开始时间
        start_time: '',
        // 营业结束之间时间
        end_time: '',
        // 是否可下单 0非营业时间禁止下单  1可以下单
        is_time_forbid: 1,
        // 联系人
        contact: '',
        // 联系电话
        mobile: '',
        // 详细地址
        address: '',
        // 配送方式
        delivery_type: ['express', 'shop'],
        // 是否使用配送范围 0 否 1是
        is_set_distance: 0,
        // 配送范围
        distance: '',
        // 销售佣金
        rate: '',
        // 核销佣金
        clerk_rate: '',
        // 是否独立运营
        //is_single: 0,
        self_delivery_type: []
      },
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }],
        cover_url: [{ validator: validatePic, trigger: 'change' }],
        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
        location: [{ validator: validateLocation, trigger: 'change' }],
        delivery_type: [{ validator: validateDelivery, trigger: 'change' }],
        area: [{ validator: validateArea, trigger: 'change' }],
        rate: [{ validator: rateCheck, trigger: 'change' }]
      },
      // 是否显示选择地图的组件
      select_map_visiable: false,
      // 选中的地区信息
      addressInfo: {},
      // 选中的坐标
      location: ''
    }
  },
  components: {
    Address,
    SelectMap
  },
  computed: {
    time() {
      if (
        this.outletForm.start_time &&
        this.outletForm.start_time != '' &&
        this.outletForm.end_time &&
        this.outletForm.end_time != ''
      ) {
        let date = this.$moment().format('YYYY-MM-DD')
        let start = new Date(date + ' ' + this.outletForm.start_time).getTime()
        let end = new Date(date + ' ' + this.outletForm.end_time).getTime()
        if (start < end) {
          return '今日'
        } else {
          return '明日'
        }
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 选择保存表单
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          try {
            this.outletForm.province = this.addressInfo.province_id
            this.outletForm.city = this.addressInfo.city_id
            this.outletForm.district = this.addressInfo.district_id
            this.outletForm.latitude = this.location.split(',')[0]
            this.outletForm.longitude = this.location.split(',')[1]
            shopEdit(this.outletForm).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.getDetail()
              }
            })
          } catch (error) {
            console.log(error)
          }
        } else {
          return false
        }
      })
    },
    // 查询表单详情
    okPic(e) {
      console.log(e)
      this.outletForm.cover_url = e
    },
    // 根据id获取门店详情
    getDetail() {
      shopDetail().then(res => {
        console.log(res)
        if (res.code == 0) {
          if (res.data.delivery_type && res.data.delivery_type != '') {
            res.data.delivery_type = JSON.parse(res.data.delivery_type)
          }
          if (res.data.self_delivery_type && res.data.self_delivery_type != '') {
            res.data.self_delivery_type = JSON.parse(res.data.self_delivery_type)
          }
          let location = {
            province_id: res.data.province - 0,
            city_id: res.data.city - 0,
            district_id: res.data.district - 0
          }
          this.addressInfo = location
          if (res.data.latitude && res.data.longitude) {
            this.location = res.data.latitude + ',' + res.data.longitude
          }
          this.outletForm = res.data
          this.$set(this.outletForm, 'cover_url', this.outletForm.cover_url)
        }
      })
    },
    // 显示上传图片组件
    showLoadImg() {
      this.$refs.img.onClickUploadBtn()
    },
    change(e) {
      console.log(e)
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  padding: 24px;
  .delivery {
    padding-top: 5px;
    p {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 8px;
    }
  }
  .loadImg {
    padding: 8px;
    width: 104px;
    height: 104px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
    opacity: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    .anticon {
      font-size: 30px;
      color: rgba(0, 0, 0, 0.45);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
